<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="35%"
      :before-close="cancel"
      @open="open"
    >
      <div>
        <el-descriptions class="margin-top" direction="veritical" :column="2" border>

          <el-descriptions-item :span="3">
            <template slot="label">
              <i class="el-icon-user" />
              角色名
            </template>
            <el-input v-model="form.role" placeholder="请输入角色名称"/>
          </el-descriptions-item>

          <el-descriptions-item :span="3">
            <template slot="label">
              <i class="el-icon-office-building" />
              角色描述
            </template>
            <el-input v-model="form.description" placeholder="对该角色的职责进行描述"/>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    roleInfo: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {},
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
    // departmentList: {
    //   type: Array,
    //   // eslint-disable-next-line vue/require-valid-default-prop
    //   default: []
    // }
  },
  data() {
    return {
      form: {
        role: "",
        description: "",
      },
    };
  },
  methods: {
    // sexSelected(val) {
    //   this.form.sex = val;
    // },
    // deptSelected(val) {
    //   this.form.dept = val;
    // },
    open() {
      // console.log(this.data)
      if (this.index === 1) {
        this.form = this.roleInfo;
      }
    },
    initForm() {
      this.form = {
        role: "",
        description: "",
      };
    },
    cancel() {
      this.$emit("cancel");
      this.initForm();
    },
    ok() {
      this.form.accountId = this.$store.getters.accountId;
      this.$emit("ok", this.form);
      this.initForm();
    },
  },
};
</script>

<style>
</style>
